<template>
  <el-collapse class="collapse-container">
    <el-collapse-item v-for="(item, index) in collapse" :key="index" :title="item.title" :name="item.name">
      <component :is="item.cmp" :bpmnElement="bpmnElement" ref="propertiesCmp"></component>
    </el-collapse-item>
  </el-collapse>
</template>

<script>
import UserTask_General from "./userTaskComponents/UserTask_General.vue";
import UserTask_Form from "./userTaskComponents/UserTask_Form.vue";
import UserTask_Listeners from "./userTaskComponents/UserTask_Listeners.vue";
import UserTask_MultiInstance from "./userTaskComponents/UserTask_MultiInstance.vue";
import UserTaskHOC from "./userTaskComponents/UserTaskHOC.js";

export default {
  name: "Properties_UserTask",
  inject: ["modelerObj"],
  data() {
    return {
      collapse: {
        general:  {
          title: "通用项",
          name: 1,
          cmp: UserTaskHOC(UserTask_General)
        },
        multiInstance: {
          title: "多实例选项",
          name: 2,
          ref: "multiInstanceForm",
          cmp: UserTaskHOC(UserTask_MultiInstance)

        },
        form: {
          title: "表单选项",
          name: 4,
          cmp: UserTaskHOC(UserTask_Form)
        }
      },
      bpmnElement: null
    }
  }
}
</script>

<style scoped lang="scss">
  .collapse-container{
    :deep(.el-collapse-item){
      margin-bottom: 6px;
      .el-collapse-item__header{
        font-size: 16px;
        font-weight: bold;
        padding-left: 5px;
        background: #eee;
      }
      .el-collapse-item__wrap{
        background: transparent;
        .el-collapse-item__content{
          padding-bottom: 0;
          margin-top: 10px;
        }
      }
    }
  }

</style>